<div>
    <div class="right_head">
        <form action="" class="form-inline" id="conditionQuery" method="get">
            <div class="form-group">
                <label for="id">id</label>
                <input class="form-control" id="id" name="id" placeholder="请输入设备id" type="text">
            </div>

            <div class="form-group">
                <label for="category">类别</label>
                <select class="bg-info text-center" id="category" name="category">
                    <option name="category" selected value="">不限</option>
                    <option name="category" value="类别1">1</option>
                    <option name="category" value="类别2">2</option>
                </select>
            </div>

            <div class="form-group">
                <label for="information">详细信息</label>
                <input class="form-control" id="information" name="information" placeholder="请输入详细信息（模糊匹配）"
                       style="width: 200px;" type="text">
            </div>

            <div class="form-group">
                <label for="position">位置</label>
                <input class="form-control" id="position" name="position" placeholder="请输入位置" style="width: 170px;"
                       type="text">
            </div>

            <div class="form-group">
                <label for="status">状态</label>
                <select class="bg-info text-center" id="status" name="status">
                    <option name="status" selected value="">不限</option>
                    <option name="status" value="正常">正常</option>
                    <option name="status" value="异常">异常</option>
                </select>
            </div>

            <button class="btn btn-default" type="submit">查询</button>

            <a class="btn btn-default" href="device_create.html">增加设备</a>

            <button class="btn btn-danger" id="delete_selected" type="button">删除所选</button>
        </form>

        <script>
            $(function () {
                $("#conditionQuery").submit(function () {
                    $.get("/devices/pages/1", $(this).serialize(), function (data) {
                        table(data)
                    })
                    return false;
                });

                //设置类别、状态下拉框标签内容
                $.get("/devices/category", {}, function (data) {
                    var category = data.data;

                    let length = category.length;
                    var option = '<option name="category" selected value="">不限</option>';
                    for (let i = 0; i < length; i++) {
                        option += '<option name="category" value="' + category[i] + '">' + category[i] + '</option>';
                    }

                    $("#category").html(option);
                });

                $.get("/devices/status", {}, function (data) {
                    var status = data.data;

                    let length = status.length;
                    var option = '<option name="status" selected value="">不限</option>';
                    for (let i = 0; i < length; i++) {
                        option += '<option name="status" value="' + status[i] + '">' + status[i] + '</option>';
                    }

                    $("#status").html(option);
                });
            });
        </script>
    </div>

    <div class="table-responsive">
        <form id="delete_list_form">
            <table class="table table-striped table-hover">
                <tr class="warning">
                    <th><input id="first_btn" type="checkbox"></th>
                    <th>id</th>
                    <th>类别</th>
                    <th>详细信息</th>
                    <th>位置</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                    <th>操作</th>
                </tr>

                <tr>
                    <td><input name="ids" type="checkbox" value="' + employee.id + '"></td>
                    <td>id</td>
                    <td>category</td>
                    <td>information</td>
                    <td>position</td>
                    <td>status</td>
                    <td>createTime</td>
                    <td>updateTime</td>
                    <td>
                        <a class="btn btn-default btn-sm" href="#"
                           style="margin-right: 10px;">修改</a>
                        <a class="btn btn-default btn-sm" href="#">删除</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

<div class="nav">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a aria-label="Previous" href="#">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a aria-label="Next" href="#">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <script>
        function changePage(current) {
            $.get("devices/pages/" + current, $("#conditionQuery").serialize(), function (data) {
                table(data);
            });
        }
    </script>
</div>

<script>
    //根据获取到的数据生成表单和分页条
    function table(data) {
        var list = data.data.records;

        var table_html = "";
        table_html += '<tbody><tr class="warning">' +
            '<th><input id="first_btn" type="checkbox"></th>' +
            '<th>id</th>' +
            '<th>类别</th>' +
            '<th>详细信息</th>' +
            '<th>位置</th>' +
            '<th>状态</th>' +
            '<th>创建时间</th>' +
            '<th>修改时间</th>' +
            '<th>操作</th>' +
            '</tr>';

        for (let i = 0; i < list.length; i++) {
            var device = list[i]
            table_html += '<tr>' +
                '<td><input name="ids" type="checkbox" value="' + device.id + '"></td>"' +
                '<td>' + device.id + '</td>' +
                '<td>' + device.category + '</td>' +
                '<td>' + device.information + '</td>' +
                '<td>' + device.position + '</td>' +
                '<td>' + device.status + '</td>' +
                '<td>' + device.createTime + '</td>' +
                '<td>' + device.updateTime + '</td>' +
                '<td>' +
                '<a class="btn btn-default btn-sm" style="margin-right: 10px;" href="/device_update.html?deviceId=' + device.id + '">修改</a>' +
                '<a class="btn btn-default btn-sm" href="javascript:deleteDevice(' + device.id + ');">删除</a>' +
                '</td>' +
                '</tr>'
        }

        $(".table").html(table_html + "</tbody>");// 加上<tbody>表格内的样式才生效，否则失效

        var total = data.data.total;
        var size = data.data.size;//共几页
        var current = data.data.current;

        var pages = data.data.pages;

        var ul_html;

        var beforeNumber = current - 1;
        if (beforeNumber < 1) {
            ul_html = '<li class="disabled">' +
                '<a aria-label="Previous" href="javascript:;">' +
                '<span aria-hidden="true">&laquo;</span>' +
                '</a>' +
                '</li>';
        } else {
            ul_html = '<li>' +
                '<a aria-label="Previous" href="javascript:changePage(' + beforeNumber + ');">' +
                '<span aria-hidden="true">&laquo;</span>' +
                '</a>' +
                '</li>';
        }

        //todo 页数多时，当前页居中 p493
        for (let i = 1; i <= pages; i++) {
            if (i === current) {
                ul_html += '<li class="active"><a href="javascript:;">' + i + '</a></li>';
            } else {
                ul_html += '<li><a href="javascript:changePage(' + i + ')">' + i + '</a></li>';
            }
        }

        var afterNumber = current + 1;
        if (afterNumber > pages) {
            ul_html += '<li class="disabled">' +
                '<a aria-label="Next" href="javascript:;">' +
                '<span aria-hidden="true">&raquo;</span>' +
                '</a>' +
                '</li>';
        } else {
            ul_html += '<li>' +
                '<a aria-label="Next" href="javascript:changePage(' + afterNumber + ');">' +
                '<span aria-hidden="true">&raquo;</span>' +
                '</a>' +
                '</li>';
        }

        $(".pagination").html(ul_html);

        $("#first_btn").click(function () {
            var ids = document.getElementsByName("ids");
            for (var i = 0; i < ids.length; i++) {
                ids[i].checked = this.checked;
            }
        });
    }

    // 加载这个页面时就请求一次
    $(function () {
        changePage(1);

        $("#delete_selected").on("click", function () {
            if (confirm("确定要删除选中的设备吗？")) {
                var ids = $("input[name='ids']");
                for (var i = 0; i < ids.length; i++) {
                    if (ids[i].checked) {
                        deleteDevices($("#delete_list_form").serialize());
                        return;
                    }
                }
                alert("请至少选择一个设备进行删除");
            }
        });
    });

    function deleteDevice(id) {
        if (confirm("确定要删除该设备吗？")) {
            $.ajax({
                url: "/devices/" + id, // 请求路径
                type: "delete", //请求方式
                data: {},//请求参数
                success: function (data) {//响应成功后的回调函数
                    if (data.code === 1) {
                        alert(data.data);
                    } else {
                        alert(data.msg);
                    }
                },
                error: function () {//请求响应出现错误会执行的回调函数
                    alert("出错啦...")
                },
                dataType: "json"//设置接受到的响应数据的格式
            });

            changePage(1);
        }
    }

    function deleteDevices(ids) {
        $.ajax({
            url: "/devices", // 请求路径
            type: "delete", //请求方式
            data: ids,//请求参数（传入序列化的参数）
            success: function (data) {//响应成功后的回调函数
                if (data.code === 1) {
                    alert(data.data);
                } else {
                    alert(data.msg);
                }
            },
            error: function () {//请求响应出现错误会执行的回调函数
                alert("出错啦...")
            },
            dataType: "json"//设置接受到的响应数据的格式
        });

        changePage(1);
    }
</script>